<template>
    <div :class="['form_item', ctx.active.value ? 'active' : '']" @click.stop="selectTarget(ctx.id)">
        <component :is="FormItem[ctx.type]" :id="ctx.id"></component>
        <div class="tools">
            <el-icon :class="parentId === undefined ? 'my-handle' : `handle_${parentId}`"><Rank /></el-icon>
            <el-icon @click.stop="moveUp(ctx.id, parentId)"><Top /></el-icon>
            <el-icon @click.stop="moveDown(ctx.id, parentId)"><Bottom /></el-icon>
            <el-icon @click.stop="copy(ctx.id, parentId)"><CopyDocument /></el-icon>
            <el-icon @click.stop="del(ctx.id, parentId)"><Delete /></el-icon>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { FormItem } from '../form_item'
import { byId, selectTarget, copy, del, moveDown, moveUp } from '../lib/form'

const props = defineProps<{ id: string; parentId?: string }>()
const ctx = byId(props.id)
</script>

<style scoped lang="scss">
.form_item {
    $borderColor: #009688;
    width: 100%;
    // border-top: 1px dashed $borderColor;
    // border-left: 1px dashed $borderColor;
    // border-right: 1px dashed $borderColor;
    position: relative;
    &:last-child {
        // border-bottom: 1px dashed $borderColor;
    }
    .tools {
        display: none;
    }
    &.active {
        background-color: #e9f4fd;
        border: 1px dashed $borderColor;
        & > .tools {
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 2px 5px;
            :deep(.el-icon) {
                color: white;
                cursor: pointer;
                font-size: 13px;
                display: inline-block;
                margin-left: 10px;
                &:last-child {
                    margin-right: 10px;
                }
            }
        }
    }
}
</style>
